<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .gn{
        width: 1100px;
        height: auto;
        flex-wrap: wrap;
        display: flex;
        margin: auto;
    }
    .tu{
        width: 650px;
        height: 350px;
        background:linear-gradient(120deg,red,blue);
        margin-left: 50px;
        display: grid;   
        overflow: hidden;
        position: relative;
        animation: animatel 5s linear infinite;
        animation-delay: 3s;
        }
        @keyframes animatel {
            0%{background:linear-gradient(120deg,red,blue);}
            25%{background:linear-gradient(60deg,yellow,green);}
            50%{background:linear-gradient(30deg,purple,rgb(5, 195, 243));}
            75%{background:linear-gradient(90deg,rgb(236, 201, 0),rgb(225, 0, 255));}
            75%{background:linear-gradient(150deg,rgb(8, 241, 171),rgb(172, 9, 45));}
        }
        #imglist a{
        color: white;
        text-decoration: none;
    }
    .lie{
        width: 350px;
        height: 350px;
        display: grid;
        margin-right: 50px;
        background-image: radial-gradient(9000px 90px,rgb(124, 109, 109),rgb(5, 5, 5));
    }
    .lie a{
        color: white;
        margin-top: -2px;
        position: relative;
    }
    .cow{
        color: white;
        background-size: 300%;
        position: relative;
    }
    .po1{
        align-items: center;
        height: 50px;
        width: 200px;
        margin-left: 50px;
        display: inline-block;
        box-sizing: border-box;
        position: relative; 
        cursor: pointer;
    }
    .po2{
        align-items: center;
        height: 50px;
        width: 200px;
        margin-left: 25px;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
    }
    .po3{
        align-items: center;
        height: 50px;
        width: 191px;
        margin-left: 25px;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
    }
    #iga{
        width: 30px;
        height: 30px;
        padding-top: 10px;
    }
    #igb{
        width: 30px;
        height: 30px;
        padding-top: 10px;
    }
    #igc{
        width: 30px;
        height: 30px;
        padding-top: 10px;
    }
    h3{
        font-size: 120%;
        font-weight:600;
        margin-top: 0px;       
    }
    .cv{
        width: 350px;
        height: 750px;
        margin-left:0px;
        box-sizing: border-box;
        float: right;
        position: relative;
        display: grid;
        
    }
    .ping{
        margin-left: 50px;
        position: relative;
        width: 650px;
        height: 706px;
        bottom: 19.5px;
    }
    #icolist li{
        text-align: center;
        float: left;
        cursor: pointer;
        margin-left: 25px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        background-color: yellow;
        color: blue;
        cursor: pointer;
    }
    #lcolist{
        position:relative;
    }

    li:hover{
        color:black;
        background-color: white;
    }
    .mg{
        width: 50px;
        height: 50px;
    }
    .a1{
        font-size: 20px;
        text-decoration: none;
        color: black;
    }
    .a1:hover{
        color: rgb(81, 199, 235);
        background-color: black;
    }
    .stn{
        width: 30px;
        height: 30px;
    }



    .nit{
        display: inline-block;
        position: relative;
        font-size: 20px;
        font-weight: 600;
    }
    .pot{
        height: 115px;
        width: 115px;
        border-radius: 50%;
        display: inline-block;
        float: left;
    }
    #claxq{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    #claxw{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    #claxe{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    #claxe{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    #claxr{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    #claxt{
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .a2{
        float: right;
        font-size: 26px;
        cursor: pointer;
        margin-right: 20px;
    }
    .a2:hover{
        background-color: white;
    }

    #imglist{
        width: 13650px;
        height: 350px;
        margin-left: -40px;
        margin-top: 0px;
        position: relative;
    }
    #imglist h1{
        width: 650px;
        height: 350px;
        padding-top: 120px;
        text-align: center;
    }
    #imglist h1{
        float: left;
    }

    .plappraise{
        display: flex;
        margin-top: 10px;
        width: auto;
        height: auto;
        display: flex;
        justify-content: flex-end;
        margin: 0px 5px;
    }

    .remarks{
  display: flex;
  margin: 20px 0px;
}
.remarks ul li{
  margin-bottom: 20px;
  display: flex;
}
.avatar{
  width: 100px;
  height: 100px;
  background:url(./图/01.png) ;
  background-size:cover ;
  border-radius: 50%;
}
.contents{
  width: 450px;
  height: 650px;
  margin-left: 0px; 
}
.identification{
  display: flex;
  width: auto;
  margin-bottom: 0px;
}
.identification p{
  margin-right:18px; 
  color: darkgrey;
}
.identification p:nth-child(1){
  color: #000;
}
.pltext {
  width: 400px;
  height: auto;
  display: flex;
}
.plappraise{
  margin-top: 10px;
  width: auto;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
.plappraise {
  display: flex;
}
.plappraise p{
  margin: 0px 5px;
}
.plappraise p{
  margin: 0px 5px;
}
.dianz{
  color: rgb(13, 195, 10);
}
.cai{
  color: red;
}
.plappraise p:nth-child(3){
  color: deepskyblue;
}
.fbu1{
  width: 600px;
  height: 40px;
  resize: none;
  border: 1px #004ff9 solid;
  border-radius: 5px;
  padding: 12px;
  outline: none;
}
.remark1 button{
  width: 80px;
  height: 50px;
  background-color: #66CCFF;
  border: 0px;
  outline: none;
  border-radius: 5px;
  transform: translateY(-25px);
  cursor: pointer; /*���� */
}
</style>
<body>
    <div class="gn">
        <div class="tu">
            <ul id="imglist">
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第一集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=2&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第二集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=3&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第三集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=4&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第四集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=5&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第五集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=6">第六集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=7">第七集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=8">第八集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=9">第九集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=10&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第十集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=11">第十一集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=12&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第十二集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=13">第十三集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=14&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第十四集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=15">第十五集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=16">第十六集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=17">第十七集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=18">第十八集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=19">第十九集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us?p=20">第二十集</a></h1>
                <h1><a href="https://www.bilibili.com/video/BV1aA411x7Us/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce">第一集</a></h1>
            </ul>
        </div>
        <div class="lie">
        <h3 class="cow">标题:计算机的介绍</h3>
        <h3 class="cow">简介:零基础手把手让你了解计算机</h3>
        <h3 class="cow">UP主:猿来教育</h3>
        <h3 class="cow">选集:</h3>
        <ul id="icolist">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        </ul>
        </div>

        <div>
        <div class="po po1"><img src="图/播放.png" alt="" id="iga" onclick="func_dz()" ><span id="dza">0</span></div>
        <div class="po po2"><img src="图/点赞.png" alt="" id="igb" onclick="func_dx()"><span id="dzs">0</span></div>
        <div class="po po3"><img src="图/收藏.png" alt="" id="igc" onclick="func_dc()"><span id="dzd">0</span></div>
        <div class="ping"><h2>评论数量:</h2>
            <div>
                <div class="remark1">
                    <textarea id="tx" placeholder="发布评论" rows="2" maxlength="200" class="fbu1"></textarea>
                    <button class="anniu">发布</button>
                  </div>
                  <div class="remarks">
                    <ul class="nan">
                       <li class="man">
                        
                   <div class="avatar"></div>
                   <div class="contents">
                    
                     <div class="identification">
                       
                       <p class="name">小米米</p>
                       <p class="IP">IP:湖南</p>
                       <p class="usertime">2024/11/06 22:20:15</p>
                     </div>
                     <div class="pltext">
                       <p>对我的学习很有帮啊哈丢完对我的学习很有帮啊哈丢完后啊哈对啊华为的话对我的学习很有帮啊哈丢完后啊哈对啊华为的话对我的学习很有帮啊哈丢完后啊哈对啊华为的话对我的学习很有帮啊哈丢完后啊哈对啊华为的话对我的学习很有帮啊哈丢完后啊哈对啊华为的话对我的学习很有帮啊哈丢完后啊哈对啊华为的话</p>
                      
                     </div>
                      <div class="plappraise">
                           <p>赞[<span>0</span>]</p>
                           <p>踩[<span>0</span>]</p>
                           <p>回复[<span>0</span>]</p>
                           <p>分享</p>
                       </div>
                       </li> 
                   </ul>
                 </div>
                 </div>
                </div>
        </div>

        <div class="cv">
        <h3>相关推荐:</h3>
        <li class="qw"><img src="图/量子计算机.png" alt="" class="mg"><a href="https://www.bilibili.com/video/BV15b421H7z1/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce" class="a1">量子计算机的发展现状与未来</a><p><img src="图/播放.png" alt="" class="stn">播放量：375</p></li>
        <li class="qw"><img src="图/计算机之父.png" alt="" class="mg"><a href="https://www.bilibili.com/video/BV1j5411L7ox/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce" class="a1">计算机发展简史</a><p><img src="图/播放.png" alt="" class="stn">播放量：7.2万</p></li>
        <li class="qw"><img src="图/中国计算机之父.png" alt="" class="mg"><a href="https://www.bilibili.com/video/BV1BT4y127o3/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce" class="a1">谁是中国计算机人的祖师爷？</a><p><img src="图/播放.png" alt="" class="stn">播放量：54.2万</p></li>
        <li class="qw"><img src="图/5G技术.png" alt="" class="mg"><a href="https://www.bilibili.com/video/BV1H7411y7Hh/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce" class="a1">5G技术的发展</a><p><img src="图/播放.png" alt="" class="stn">播放量：274.0万</p></li>
        <li class="qw"><img src="图/AI技术.png" alt="" class="mg"><a href="https://www.bilibili.com/video/BV15q421A7tB/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce" class="a1">AI技术的进化革新之路</a><p><img src="图/播放.png" alt="" class="stn">播放量：7534</p></li>
        <li class="qw"><img src="图/神威计算机.png" alt="" class="mg"><a href="https://www.bilibili.com/video/BV1o1421z7xA/?spm_id_from=333.337.search-card.all.click&vd_source=04aaeecd73b236361bb4d5bda55db0ce" class="a1">中国神威计算机问鼎世界</a><p><img src="图/播放.png" alt="" class="stn">播放量：276</p></li>
       </div>
       </div>
       <script>

var left=0;
var timer;
var esico=document.getElementById('icolist').getElementsByTagName('.lie li');
var eicolist=document.querySelector('#icolist');
var eimglist=document.querySelector('#imglish');



function imgchange(n){
    let lt =  -(n * 650);
    imglist.style.marginLeft =lt+'px';
    left =lt;
}

function icochange(m){
  for (let index=0; index < esico.length; index++){
     esico[index].style.backgroundColor='';

  }
  if(m<esico.length){
     esico[m].style.backgroundColor='red';
  }
}
eicolist.onclick=function () {
 var tg =event.target;
 let ico = tg.innerHTML -1 ;
 imgchange(ico);
 icochange(ico);
}






var dzca=document.getElementById("dza").innerHTML;
var num=dzca
function func_dz(){
     dzca++;
     document.getElementById("dza").innerHTML=dzca;
}


var dzcs=document.getElementById("dzs").innerHTML;
var num=dzcs
function func_dx(){
     dzcs++;
     document.getElementById("dzs").innerHTML=dzcs;
}



var dzcd=document.getElementById("dzd").innerHTML;
var num=dzcd
function func_dc(){
     dzcd++;
     document.getElementById("dzd").innerHTML=dzcd;
}



var werd=document.getElementById("wer").innerHTML;
var num=werd
function func_dv(){
     werd++;
     document.getElementById("wer").innerHTML=werd;
}


var werf=document.getElementById("wet").innerHTML;
var num=werf
function func_db(){
     werf++;
     document.getElementById("wet").innerHTML=werf;
}


var werg=document.getElementById("wey").innerHTML;
var num=werg
function func_dn(){
     werg++;
     document.getElementById("wey").innerHTML=werg;
}



var werh=document.getElementById("weu").innerHTML;
var num=werh
function func_dm(){
     werh++;
     document.getElementById("weu").innerHTML=werh;
}

var werj=document.getElementById("wei").innerHTML;
var num=werj
function func_dl(){
     werj++;
     document.getElementById("wei").innerHTML=werj;
}



const li=document.createElement('li')
const ul=document.querySelector('.remarks ul')
const anniu=document.querySelector('.anniu')
/* const text=document.querySelector('') */
const tx=document.querySelector('#tx')

function publish(){
  console.log(tx.value)
   if(tx.value===''){return}

  const li=document.createElement('li')
  li.innerHTML=`
  
      <div class="avatar"></div>
      <div class="contents">
       
        <div class="identification">
          
          <p class="name">小米米</p>
          <p class="IP">IP:湖南</p>
          <p class="usertime">2024/11/06 22:20:15</p>
        </div>
        <div class="pltext">
          <p>${tx.value}</p>
         
        </div>
          <div class="plappraise">
              <p>赞[<span>0</span>]</p>
              <p>踩[<span>0</span>]</p>
              <p>回复[<span>0</span>]</p>
              <p>分享</p>        
          </div>
          `
          ul.appendChild(li)
          tx.value=''
          clock()
}
tx.addEventListener('keyup',function(e){
  if(e.key==='Enter'){
    publish()
  }
})
clock()
anniu.addEventListener('click',publish)
function clock(){
const dainz=document.querySelector('.plappraise p:nth-child(1)')
const cai=document.querySelector('.plappraise p:nth-child(2)')
const huifu=document.querySelector('.plappraise p:nth-child(3)')

const dainzwz=document.querySelector('.plappraise p:nth-child(1) span')
const caiwz=document.querySelector('.plappraise p:nth-child(2) span')
const huifuwz=document.querySelector('.plappraise p:nth-child(3) span')
let statedz=false
console.log(dainzwz.innerHTML)
dainz.addEventListener('click',function(){
  if(statedz===false){
    dainzwz.innerHTML=+(dainzwz.innerHTML)+1
    dainz.classList.add('dianz')
    statedz=true
  }else{
    dainz.classList.remove('dianz')
    dainzwz.innerHTML=+(dainzwz.innerHTML)-1
    statedz=false
  }
})
let statec=false
cai.addEventListener('click',function(){
  if(statec===false){
    caiwz.innerHTML=+(caiwz.innerHTML)+1
    cai.classList.add('cai')
    statec=true
  }else{
    cai.classList.remove('cai')
    caiwz.innerHTML=+(caiwz.innerHTML)-1
    statec=false
  }
})
}
 </script>
</body>
</html>
















